<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线聊天</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="login/js/login.js"></script>
</head>
<body>
<div id="a" style="height: 100%;display: flex;flex-direction: column;">
    <header class="p900 flexbtw">
        <h3>在线聊天、在线客服</h3>
        <div>
            <login @logined="connect"></login>
        </div>
    </header>
    <main class="m900 flexbtw">
        <aside>
            <div v-for="u in onlines" class="flexbtw" style="justify-content: center">
                <img class="headimg" :src="u.head" alt="">
                {{u.name}}
            </div>
        </aside>
        <article>
            <div id="msgs">
                <div v-for="m in msgs"
                     :class="{send : m.sender.id==id, recv : m.sender.id!=id}">
                    <label class="user">
                        <img class="headimg" :src="m.sender.head" alt="">
                    </label>
                    <span class="msg" v-if="m.type=='txt'">{{m.content}}</span>
                    <img class="msg" v-else-if="m.type=='img'" :src="m.content" style="max-height: 100px"/>
                </div>
            </div>
            <textarea placeholder="Ctrl + Center 发送" v-model="msg" :disabled="!ws"
                    @paste="sendImg"></textarea>
            <div id="ops">
                <input placeholder="用户名" v-model="id" :disabled="ws" style="display: none">
                <button @click="connect" :disabled="ws" style="display: none">连接</button>
                <button :disabled="!ws" @click="send">发送</button>
            </div>
        </article>
    </main>
    <footer>源辰公司</footer>
</div>
<script>
    var v = new Vue({
        el : "#a",
        data:{
            user:null,
            id:"",
            msg:"",
            msgs:[],
            onlines:[],
            ws:null
        },
        methods:{
            connect(user){
                if(user){
                    this.user = user;
                    this.id = user.id;
                }
                if(!this.id){
                    this.$alert("请输入用户名!");
                    return;
                }
                this.ws = new WebSocket("ws://127.0.0.1:80/talk/" + this.id);
                this.ws.onopen = ()=>{
                    console.info("链接成功!");
                }
                this.ws.onclose = ()=>{
                    console.info("断开链接!");
                }
                this.ws.onmessage = (data)=>{
                    let msgObj = JSON.parse(data.data);
                    this.onlines = msgObj.onlines;
                    let type = msgObj.content.substring(0,3);
                    msgObj.content = msgObj.content.substring(4);
                    this.msgs.push({
                        sender: msgObj.sender,
                        content: msgObj.content,
                        type: type
                    });
                }
            },
            send(){
                if(this.msg){
                    this.ws.send("txt:" + this.msg);
                    this.msg = "";
                }
            },
            sendImg(e){
                if (e.clipboardData.items[0].type.match(/image/)) {
                    var fd = new FormData();
                    var blob = e.clipboardData.items[0].getAsFile();
                    fd.append("file", blob, "随机名.jpg");
                    fd.append("type", "image")
                    axios.post("/upload/upload", fd).then(res=>{
                       if(res.data.code == 1){
                           let webPath = res.data.data;
                           this.ws.send( "img:" + webPath);
                       }
                    });
                }
            }
        }

    })

</script>
</body>
</html>



















































<style>
    * {
        padding: 0px;
        margin: 0px;
        font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    }

    html,body{
        height: 100%;
    }
    body{
        display: flex;
        flex-direction: column;
    }

    a {
        text-decoration: none;
    }

    button{
        padding: 3px 10px;
    }

    .p900 {
        padding: 0px calc((100% - 900px) / 2);
    }

    .m900 {
        width: 900px;
        margin: 0px auto;
    }

    .flexbtw {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header {
        background-color: #eee;
        flex: none;
    }
    header>h3{
        margin: 10px 0px;
    }

    main {
        flex: auto;
        background-color: #ddd;
    }

    footer {
        flex: none;
        padding: 5px;
        text-align: center;
        background-color: #eee;
    }

    aside {
        width: 200px;
        height: 100%;
        background-color: #ccc;
        flex: none;
    }

    article {
        height: 100%;
        flex: auto;
    }

    article {
        display: flex;
        flex-direction: column;
    }

    #msgs {
        flex: auto;
        box-sizing: border-box;
        padding: 10px;
    }

    #msg {
        flex: none;
        width: 100%;
        height: 100px;
        box-sizing: border-box;
    }

    .send > * {
        float: right;
    }

    .recv > * {
        float: left;
    }

    .send, .recv {
        clear: both;
        padding: 5px 0px;
    }

    .user, .msg {
        padding: 5px;
    }

    .msg {
        background-color: #e9e9e9;
        border-radius: 3px;
    }

    aside>div{
        text-align: center;
        padding: 10px;
        margin: 3px;
        background-color:#8c939d;
    }

    aside>div:hover{
        background-color:#8c939d55;
        cursor: pointer;
    }

    #ops{
        text-align: right;
        padding: 7px;
    }
    #ops>*{
        box-sizing: border-box;
        height: 25px;
        vertical-align: middle;
        margin: 0px 5px;
        text-align: center;
    }
    textarea{
        padding: 3px;
    }
    .headimg{
        max-width: 30px;
        max-width: 30px;
        object-fit: cover;
    }
</style>